<div :class="calendarClass">
    <context-menu-container>
        <template>
            <div class="event-legends">
                <div :class="{'event-lengend':true, 'EMEQDEBUG':true, 'event-disabled':!isShowlegend.EMEQDEBUG}" @click="legendTrigger('EMEQDEBUG')">
                    <div class="lengend-icon" style="background:rgba(255, 2, 2, 1);"></div>
                    <span style="color:;">事故记录</span>
                </div>
                <div :class="{'event-lengend':true, 'EMEQKEEP':true, 'event-disabled':!isShowlegend.EMEQKEEP}" @click="legendTrigger('EMEQKEEP')">
                    <div class="lengend-icon" style="background:rgba(103, 58, 183, 1);"></div>
                    <span style="color:;">保养记录</span>
                </div>
                <div :class="{'event-lengend':true, 'EMEQMAINTANCE':true, 'event-disabled':!isShowlegend.EMEQMAINTANCE}" @click="legendTrigger('EMEQMAINTANCE')">
                    <div class="lengend-icon" style="background:rgba(255, 132, 0, 1);"></div>
                    <span style="color:;">抢修记录</span>
                </div>
                <div :class="{'event-lengend':true, 'EMEQSETUP':true, 'event-disabled':!isShowlegend.EMEQSETUP}" @click="legendTrigger('EMEQSETUP')">
                    <div class="lengend-icon" style="background:rgba(4, 0, 255, 1);"></div>
                    <span style="color:;">更换安装</span>
                </div>
                <div :class="{'event-lengend':true, 'EMEQCHECK':true, 'event-disabled':!isShowlegend.EMEQCHECK}" @click="legendTrigger('EMEQCHECK')">
                    <div class="lengend-icon" style="background:rgba(0, 255, 72, 1);"></div>
                    <span style="color:;">维修记录</span>
                </div>
            </div>
            <FullCalendar
                ref="calendar"
                :locale="$i18n.locale"
                height="parent"
                :firstDay="1"
                :eventLimit="true"
                :editable="!isSelectFirstDefault && true"
                :buttonText="buttonText" 
                :header="header"
                :plugins="calendarPlugins"
                :events="searchEvents.bind(_self)"
                :customButtons="{gotoDate: {text: $t('app.calendar.gotoDate'),click: this.openDateSelect.bind(_self)}}"
                :validRange="validRange"
                :defaultDate="defaultDate"
                :eventRender="eventRender.bind(_self)"
                @dateClick="onDateClick.bind(_self)"
                @eventClick="onEventClick.apply(_self, arguments)"
                @eventDrop="onEventDrop.bind(_self)"
                defaultView="dayGridMonth"
            ></FullCalendar>
            <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name="date-select-modal" @on-ok="gotoDate()">
                <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker>
            </modal>
        </template>
    </context-menu-container>
</div>
